<template>
  <div id="login_container">
    <header-nav headTitle="登录"></header-nav>
    <form class="login_form">
      <p class="input"><span>Username: </span><input type="text" name="username" v-model="username"></p>
      <p class="input"><span>Password: </span><input type="password" name="password" v-model="password"></p>
      <p class="input captchas_code"><span>Captchas: </span><input type="text" name="captchas" v-model="captchas"><img :src="captchasPng" alt=""> <span @click="getCaptchasCode()" class="captchas_code_txt">换一张</span></p>
      <button class="login_btn" @click.prevent="login()">Login</button>
    </form>
    <p class="red">Haven't account, will be automatically registered</p>
    <footer-nav></footer-nav>
    <alert-tip v-show="showAlert" :alertText="alertText" @closeTip="closeTip"></alert-tip>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import AlertTip from '../../components/AlertTip.vue'
  import { getCaptchas, login } from '../../service/getData'
  export default {
  	data() {
  		return {
  			captchasPng: '',
        username: null,
        password: null,
        captchas: null,
        showAlert: false,
        alertText: null
      }
    },
    components: {
      HeaderNav,
      FooterNav,
      AlertTip
    },
    created() {
  		this.getCaptchasCode()
    },
    methods: {
      ...mapMutations([
      	'RECORD_USERINFO'
      ]),
  		async getCaptchasCode() {
  			await getCaptchas().then(res => this.captchasPng = res.data.code)
      },
      async login() {
  			if(!this.username) {
  				this.alertText = 'Name is null!'
          this.showAlert = true
        } else if (!this.password) {
          this.alertText = 'Password is null!'
          this.showAlert = true
        } else if(!this.captchas) {
          this.alertText = 'Captchas is null!'
          this.showAlert = true
        } else {
  				await login(this.username, this.password, this.captchas).then(res => {
  					console.log(res.data)
            if(res.data.status == 0) {
              this.alertText = res.data.message
              this.showAlert = true
            } else {
  						this.RECORD_USERINFO(res.data)
  						this.$router.push('/profile')
            }
          }).catch(err => {
            this.alertText = err
            this.showAlert = true
          	throw new Error(err)
          })
        }
      },
      closeTip() {
        this.showAlert = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #login_container {
    padding-top: 1.9rem;
    @include sc(0.65rem , #434343);
  }
  .login_form {
    width: 90%;
    padding: 0.6rem 0;
    margin: 0 auto;
    .input {
      padding-bottom: 0.6rem;
      @include fj;
      align-items: center;
      justify-content: flex-start;
      span {
        display: inline-block;
        padding-right: 0.5rem;
      }
      input {
        font-size: 0.65rem;
        line-height: 1.15rem;
        height: 1.15rem;
        border: 1px solid #acacac;
      }
    }
    .captchas_code {
      input {
        width: 25%;
      }
      img {
        display: block;
        padding: 0 10px 0;
      }
      .captchas_code_txt {
        text-decoration: underline;
      }
    }
    .login_btn {
      display: block;
      width: 100%;
      background-color: #7ec801;
      text-transform: uppercase;
      color: #fff;
      height: 1.62962rem;
      line-height: 1.62962rem;
      font-size: 0.63703rem;
      text-align: center;
      margin-top: 0.66667rem;
      font-family: Helvetica, arial;
      border-radius: 10px;
    }
  }
  .red {
    width: 90%;
    margin: 0 auto;
    @include sc(0.65rem , #cc0000);
  }
</style>
